import { createVNode,render } from "vue";
import NoticeBox from "./NoticeBox.vue"

let top = 20;
let noticeItems = [];
const showTip = function (msg = "消息", info = "", icon = "") {
    // createVNode( options,props ) 
    // 构建虚拟DOM对象，并提供props数据【父向子传入的数据】
    let vnode = createVNode(NoticeBox,{
        msg:msg,
        info,
        icon,
        top
    })
    let box = document.createDocumentFragment();
    // 将虚拟DOM生真实DOM元素
    render(vnode, box);
    // console.log(vnode)

    vnode.el.addEventListener("animationend",(event)=>{
        // console.log(event)
        if(event.animationName == "moveOut"){
            document.body.removeChild(vnode.el)
        }
    })

    let key = Math.random(); 
    noticeItems[key] = vnode.el;

    document.body.appendChild(vnode.el)

    let domH = vnode.el.clientHeight+20;
    // 记录下次提示DOM出现的位置
    top = top + domH;
    setTimeout(()=>{
        vnode.el.className = "msg-box out";
        top -= domH;
        // 记录当前元素位置用于后续判断，防止手动删除时，元素位置计算错误
        let currentDomTop = parseFloat(vnode.el.style.top)
        // 删除记录中的当前元素
        delete noticeItems[key];
        // 修正页面现存元素的新位置
        for (let k in noticeItems) {
            let tempTop = parseFloat(noticeItems[k].style.top);
            // 位置小于当前元素高度时 不需要 进行位置更新
            if(tempTop>currentDomTop){
                tempTop -= domH;
                noticeItems[k].style.top = tempTop +"px";
            }
        }
    }, 5000);
}


export default showTip;